Hjem

Flow 1

Flow 2

Flow 3

Flow 4

Flow 5

1. Semester

Flow 5 - Eksamen

Projektbeskrivelse

Formål

Formålet med portfolio er at præsentere og dokumentere dit faglige niveau og vise din faglige udvikling samt gøre dig bevidst om, hvad du har arbejdet med og hvad du har lært. Det afsluttende eksamensprojekt på 1. semester har to fokusområder:


Redesign af nuværende portfolio

Med udgangspunkt i det du har lært i løbet af 1. semester, skal du viderevikle det website, der udgør din nuværende portfolio.

Den nye portfolio skal fungere som udstillingsvindue for alt det du indtil nu har arbejdet med på uddannelsen, samt fremover kunne indeholde det arbejde du kommer til at udføre i løbet af de kommende semestre. Din portfolio er dit ansigt udadtil. Den viser hvem du er og hvad du kan over for virksomheder, studiekammerater, under visere mv.

Udformningen af din nye portfolio skal demonstrere dine evner inden for design, visualisering og interaktionsudvikling. Dokumentation af udviklingen skal desuden demonstrere at du kan planlægge dit projekt bl.a. ved at udarbejde en projektplan.

Det er vigtigt, at du dokumenterer og tager nogle konkrete beslutninger i forhold til dit portfolio’s visuelle udtryk (styleguide, typografi, farver, layout, ikoner, evt logo samt stemning osv.), og at du forholder dig konsekvent i forhold til disse beslutninger. Du skal altså både designe websitet og begrunde dine designvalg og designprincipper ud fra de modeller og metoder du har lært i undervisningen.

Du skal også udarbejde en videosekvens, som kan indgå i portfolio som en del af præsentationen. Dette kan for eksempel være en præsentation af dig selv og dine evner inden for multimediedesign. Du skal ligeledes kunne redegøre for, hvordan dit re-design tager udgangspunkt i en brugertest af din første portfolio.

Den tekniske del af arbejdet skal demonstrere, at du er i stand til at anvende de redskaber og metoder, som har været gennemgået i undervisningen. Det er derfor tilladt at bruge Bootstrap for at lave denne løsning af portfolio.

Design-beslutninger og -udvikling skal begrundes og fremgå på portfolio sammen med dokumentation for planlægning, styleguide og relevante skitser på en underside på dit site, hvor hele din proces for udviklingen af dit nye portfolio beskrives.

Opdatering af portfolioindhold

1. Portfolioudvikling

Portfolio skal dokumentere den udviklingsproces, der ligger til grund for det nye portfolio-design, projektplanlægning, informationsarkitektur, designskitser, wireframes, mockups etc. Altså skal portfolio som eksamensprojektkrav indeholde udviklingsdokumentation. „fortælle historien om sin egen tilblivelse”. Din portfolio skal kommunikere, hvad dine styrker er inden for multimediedesign. Og den skal konceptuelt og visuelt udtrykke din professionelle identitet.


2. Dokumentation af tidligere projekter

Portfolio skal præsentere og dokumentere resultatet af de 4 flowprojekter, som du har arbejdet med på semestret:

Din portfolio skal som minimum præsentere de projekter, du har været med til at udvikle på 1. semester og skal vise dine færdigheder.

Du må også gerne tilføje dine egne projekter. Projekterne behøves ikke kun at være websider. Designprojekter, kunst, fotografi, video, spiludvikling, apps e.l. kan også med fordel inddrages.

Projektstyring

Jeg startede mit projektarbejde med at lave en PBS (Project Breakdown Structure), for at få defineret hvordan mit nye portfolio skulle se ud. Derefter lavede jeg en WBS (work breakdown structure), så jeg kunne udpensle de arbejdsopgaver, der skulle laves. Til sidst lavede jeg et Gantt-kort, hvor jeg tidsberegne arbejdsopgaverne.

Jeg kan allerede sige med det samme at min tidsplan ikke blev overholdt. To af grundene var henholdsvis et 180 graders design skifte 2/3-dele indeni projektet. Den anden var sygdom, som gjorde at jeg ikke var 100% på toppen, til at kunne lave mine planlagte arbejdsopgaver.

Men jeg nåede i mål, hvilket var det vigtigste!

PBS
flow 5 pbs
WBS
flow 5 wbs
Gantt-kort
flow 5 Gantt-kort

Designbrief

Baggrund for projektet

Mit portfolio er mit cv til omverden. Det er den, som viser en kommende arbejdsgiver, hvem jeg er og hvad jeg kan tilbyde dem. Den er min følgesven gennem hele min uddannelse, og er med til at vise den udvikling som jeg gennemgår. Den skal være med til at skabe en interesse for mig og mine evner, og derfor være et sted hvor man kan komme i kontakt med mig.


Hvad skal designet medvirke til at opnå?

Designet skulle meget gerne vække en interesse og lyst til at se og vide mere om hvem jeg er og hvad jeg kan.


Hvornår er sitet en succes?

Min site er en succes, når brugeren har fået et positivt indblik i hvem jeg er, og det potentiale jeg har indenfor multimediedesign, med hvad jeg kan på nuværende tidspunkt og hvad jeg kan udvikle mine evner til. Denne interesse og indblik skulle gerne give dem lyst til at tage kontakt til mig med henblik på et samarbejde.

Hvem henvender sitet sig til?

Min primære målgruppe er arbejdsgivere, som leder efter en ny samarbejdspartner inden for digitalt design. En arbejsgiver, der ønsker medarbejder, som finder det, at arbejde med mange forskellige dele af processen inden for at udvikle digitale designs og interfaces spændende.

Min Sekundær målgruppe er lærere på studiet, som følger min udvikling, og bedømmer min kunnen.


Hvad skal brugeren foretage sig?

De skal kigge på mit portfolio, se hvad jeg kan og se det potentiale som jeg besidder og så kontakte mig via min kontaktformular,


Hvad er budskabet?

At det bag denne portfolio er en kreativ og talentful kvinde med et stort potentiale til at blive en super dygtig multimediedesigner.


Hvad kan en arbejdsgiver tage med fra dig

En pålidelig og imødkommende kvinde, som har en ansvarfuld og kreativ tilgang til projekter. En potentiel medarbejder der hele tiden vidreudvikler sine evner og kompetencer indenfor sit område.

Brugertest af originalt portfolio

brugertest

Jeg udførte min brugertest på 3 personer. Grundet Covid-19, var det ikke med personlig observation, men ved at jeg sendte et link til testpersonerne. De obsevertioner de gjorde var følgende:

Forside

  • Siden tilpasser sig ikke til skærmen - kan ikke vises fuld på min laptop, der skal scrolles ned for at få underste bjælke med, og til højre for at få "MJ Multimediedesign.."mm med i billedet.
  • Video virker ikke

Faner (øverst)

  • Portfolio: Åbner i ny side i browser (Chrome) så jeg savner en returknap til forrige side.

Foto

  • Billederne åbner ikke jævnt men hakker lidt ind. Spørgsmålet er hvordan de vil komme frem hvis der er mange billeder. Jeg kunne også godt tænke mig lidt beskrivelse ifb med hvert billede
  • ALt for stor opløsning - det tager alt for lang tid at loade dem
  • Bæger præg af at det ikke er en professionel, som har taget dem

MJDesign

  • Korriger for stavefejl ;)
  • Måske skulle denne side med dine beskrivelser af dig selv og formålet med hjemmesiden være det som mødte mig som det første når jeg kom til din hjemmeside ?

Kontakt

  • Der mangler en måde for dig til at kunne kontakte kunden. (mangler et e-mail felt)
  • Selve kontaktformularen virker ikke

Portfolio

  • Billederne og opgavebeskrivelserne ser rigtig flotte ud.

Research

Idé & tanker

Mit portfolio skulle symboliserer mig - så tænkeboksen gik igang. Hvilke farver symboliserede mig? Da jeg kan godt lide alle farver, hvordan skulle jeg vælge én frem for en anden?

I det første udkast som jeg kodede, var det orange og lilla der var det gennemgående tema. Jeg havde fået baggrunden til at lige en solnedgang med forskellige opasity af farver i Illustrator. Dernæst havde jeg kigget til Pernille Lind's portfolio, og så tilføjet blomster og lavede en container i orange som fyldte 70% af siden, hvor al mit materiale så stod på.

Jeg spurgte mine medstuderende om stilen/looket var mig - hvilket de sagde ja til. Men alligevel var der noget der ikke føltes helt rigtig. Ja det var mig. En del af mig, den legesyge fatasifulde mig, men jeg ville gerne vise den professionelle mig.

Derfor valgte jeg 2/3-dele indeni opgaven og kodning at lave en U-turn. Stilen blev ændret til et look i sektioner, der fylder hele siden. i stedet for kun 70%. Farverne blev mere neautrale og afdæmpet tone - men dog stadig med lidt pep i den guld farve, men et klassisk look.

Den materet baggrund er inspireret af blå agate sten, som er utrolig flotte. Selvom jeg i starten ikke ville have et billede af mig selv på siden - inspirede Personal templaten mig til det alligevel.

Inspiration

bootstrap template personal

Personal template Bootstrap made

Jeg faldt tilfældigt over dette design da jeg søgte på portfolio templates. Jeg blev hurtigt forelsket i det look og design, som templaten viste og downloaded det også, så jeg kunne bruge det.

Både forsiden, med den enkelthed den udstrålede og portfolioet var jeg ret vild med. Dog var selve den kodning der blev brugt langt over mit nuværende niveau, så jeg valgt at bruge det som et guideline eksemple.

Jeg var også ret vild med idéen om en enkelt scroll-bar side, med alt samlet et sted. Så den idé blev til virkelighed - med et par enkelte undtagelser.


pernille lind portfolio

Pernille Lind's portfolio

Pernille Lind's portfolio blev givet til som, som inspirationskilde til vores egne portfolioer. Jeg var ret vild med hendes portfolio opsætnig, og har prøvet at gendanne denne.

portfolio

Version 1

Wireframes

Her kan I se min wireframe for min hovedside. Den fulde længde på web-versionen og et udsnit på mobil-versionen. Jeg startede med at tegne skitsen i hånden og overførte det så til en XD udgave, for et mere proffessionelt look.

håndtegnet wireframe Skitse
XD wireframe Wireframe

Designbeskrivelse

Som beskrevet før, blev hele designet jo lavet om. Min allerførste idé til mit portfolio, var en side-nav, hvor man kunne klikke og portfolio billederne ville så scrolle op, til det felt man havde valgt så som: webdesign, grafisk design, billederedigering o.s.v.

Det endte ikke sådan, da jeg ikke kunne få kodning til at fungere på den måde som jeg havde i tankerne.

Mit andet udgangspunkt var så at have en masse sider, der linkede hinanden med en horisontal nav-bar under en header med logo. Men da jeg gerne ville prøve at få en automatisk scroll når man klikkede på nav'en ændrede det pludselig hele konceptet. I første omgang var det kun enkelte dele af navigationen, som havde denne egenskab men det endte med at hele sitet blev en one-page med scroll.

Og dog. Selve "studie"-delen har links til Flow 1, Flow 2, Flow 3, Flow 4 og Flow 5, som alle er sider for sig selv.

Designet skulle stadigvæk være enkelt og indbydende, at se på, så man fik lyst til at scrolle videre eller klikke rundt på siden.

Jeg har prøvet at overholde Gestaltlovene om lighed, symetri og orden, ved at alt er opdelt i sektioner, med forskellige kollonne breder, afhængig af indhold.

Under portfolio sektionen er alle de projekter, jeg har lavet. De er delt op i kvardratiske billeder, så det ser symetrisk og harmonisk ud. Under de billeder, som indgår i de Flows vi har gennemgået, er der et link til en beskrivelse af den opgave eller projekt, som var årsagen til at billede/projektet blev skabt.

Endvidere har jeg lagt et overlay på billederne, så man kan se hvilket Flow billedet indgik i, og hvor det er lavet: Photoshop, Illustrator o.s.v.

Flow 1-4 er indelt, så de starter med de opgaver, som jeg har lavet i løbet af flowet og slutter så med det færdige projekt, som er i indgårr i alle flows. De er opstillet på samme måde, for at overskueliggøre dem for brugeren.

Flow 5 skiller sig ud, da dette er en del af eksamensprojektet. Derfor har det fået sit eget look, så den er nem at differentierer fra de andre flows.

Opdelingen er i sektioner, hvor hvert emne har en border rundt om sig. Dette er for at synliggøre, at man er kommet til et nyt afsnit, da der også indgår ret meget tekst i dette flow.

Styleguide

Typografi

font Font

Efter at have kigget på små 500 forskellige gratis fonte på nettet, fandt jeg Blackchancery (sans-serif). Den har lidt af det hele. Den er både rå, men også feminin. Den har kant men også bløde buer. Den er sammensat og kompleks - ligesom mig. Derfor valgte jeg den.

Men selvom jeg syntes rigtig godt om fonten, så er den ikke så let læselig over flere linjer eller paragraffer, så jeg vlagt at bruge Geneva. Det er en sans-serif skrift, men det gør sig godt på en skærm og på papir. Den er let læselig til trods for at der ikke er nogen seriffer til at hjælpe læseren med understøttende linjer.

Farver

#DBA858

RGB (1,1,37)

Jeg har valgt kun at bruge to farver på min site. Dette er dels for at gøre det mere overskueligt og dels fordi min baggrund har et materet mønstre, som ville gøre at for mange farver kunne blive uoverskueligt.

De to farver som jeg valgte at gå med er en guld farve. Den var ikkeret nem at få frem på farve-skalaen, da den skulle have lige den rigtige nuance. Den mørkeblå var nemmere da der allerede i min baggrund indgik en meget mørk blå farve, som fint ville kunne afblancere den materet baggrund.

Grafisk Design

baggrund Baggrund
forside Forside
logo designs Logo designs

Kodning

kode Kode

Når jeg kigger nedover min kode er det div i div jeg ser.

Min kode består primært af section's, med en over-container, som så indeholder forskellige div'ere, der igen indeholder billeder eller tekst. Så overordnet virker det jo ret simplet ik'?

Det hele blev jo lidt mere besværligt da det skulle omkodes til den nuværende stil, men det gik dog pænt hurtigt både med første version og med anden.

Enkelte ting drillede når man satte det op, især da jeg ikke havde sørget for at lave mobile-first men blot t have den responsiv. Det er ikke just helt det samme, så det var på med @media queries, så min side vil se godt ud på alle platforme.

Det virker dog staig ikke optimalt, da det er meningen at min nav-bar skal kolapse og blive til en burger menu, når den anvendes på mobilen, men det er kun Flow-linkene der får denne egenskab. Jeg ved ikke om det er fordi, at de andre nav-elementer har et id, så om det er det der gør udslaget.

Nogle andre punkter, som faktisk ledte mig til at lave en one-page site var, at i mit portfolio galleri, forsvandt den naturlige scrol-bar, så man ikke havde mulighed for at se hele galleriet på siden. Dengang havde galleriet, et filterings system, så man kunne opdele den i forskellige kategorier.

Men jeg syntes ikke at det var optimalt, at man ikke kunne scrolle på siden, så derfor prøvede jeg at kopiere galleriet ud på min forside. Her virkede scroll-baren, og så blev det rullestenen der startede lavinen der endte i en one-pager.

Ellers har jeg brugt både "justify-content", "text-align" "margin" og "padding" for at få mine elementer til at stå korrekt.

Der har været problemer undervejs. Med mange google-opslag, for at finde ud af hvorfor min kode ikke gør som jeg vil have, eller hvordan jeg får den til at gøre, som jeg vil have. Men det har altsammen, været med til at give mig et større indblik ind i kodning. Så forhåbentlig går det endnu bedre til næste gang, jeg skal kode en side.

Under studie sektionen, er der også problemer med mobil-versionen, jeg har prøvet mange

Video

storyboard Storyboard skitse

Pre-production

Fra starten havde jeg en idé om, at min video skulle vise tilblivelsen, af denne portfolio. Jeg filmede over flere gange, både fra det originale projekt og da mit re-design blev lavet. I mit færdige projekt ville jeg vise hvordan jeg gik fra en skitse tegning af wireframes, til hvordan mit portfolio så ud færdig kodet. Der bliver også vist lidt kode i videoen.

Filmiske virkemidler

Jeg har primært filmet og beskåret min video i halvnær og nær billede.

Da jeg har leget til med hastigheden af min video, valgte jeg ikke at have lyd på. Det lød dog sjovt.

Speed på videoen er alt fra 50%-700% og op til 10.000%. Jeg prøvede også at sætte en disolve funktion på i slutningen af filmen.

Jeg prøvede at indsætte tekst, men jeg have noget besvær med at få teksten til af faded både ind og ud - så den blev droppet i den færdige version.

Alt i alt synes jeg godt om min film. Det er kun anden gang jeg prøver at lave en, og jeg har været presset på tid på grund af sygdom.

Brugertest af nyt portfolio

Disse var tilbagemeldningerne med deres observationer fra brugertest nr.2

Konklution

Jeg nåede i mål. Der har både været op og nedture og frustrationer men også glæde mellem igennem denne process. Jeg har lært mere om kodning end jeg har gjort før. Fundet nogle tips og triks, som kan hjælpe en til senere brug.

Fra begyndelsen har jeg en anderledes tilgang til at lave tingene end normalt. Min kreative process starter som regl med en idé, hvorefter jeg begynder at kode. Jeg laver ikke rigtig brainstorms og sådan, da det aldrig har fungeret for mig.

At jeg så valgte at skifte retning 2/3 dele inde i opgave - var måske ikke ideel, men det har vist mig, at jeg sagtens vil kunne klare eventuelle store omvæltninger, når jeg kommer ud i den virkelige verden.

Hvis jeg ikke var blevet syg den sidste uge, regner jeg med at jeg kunne have nået mine mål til den planlagte deadline, som jeg havde sat for mig selv - nemlig den 17/12-2021.

Jeg har fravalgt enkelte ting, simpelthen fordi vi ikke har lært om det endnu - det gælder meget af javascript, som skulle have været i portfolioet.

Det drejder sig om min kontakt formular, som ikke virker. Men det behøver den heller ikke, at gøre før jeg kan tilbyde en potentiel arbejdsgiver noget mere.

Alt i alt har det været en meget lærerig process og jeg ser frem til at lære endnu mere i 2. semester.

Lært i flow 5

Arbejdet med følgende programmer

  • Adobe Photoshop
  • Adobe XD
  • Adobe Illustrator
  • Adobe InDesign
  • Adobe Premiere Pro
  • Bootstrap
  • Visual Studio